<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片Base64编码解码</title>
    <link rel="icon" type="text/css" href="ico.png">
    <style>
    	html,body { padding:0;margin:0;border:0; }
		* {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box
		}
		p { font-size:85%; margin:0; margin-bottom:4px; }
		.brn-wrap { margin:4px; }
		.btn {  }
		.data-wrap { display:flex; flex-direction:row-reverse; margin:10px; padding:10px; border:solid 4px #ccc; border-radius: 12px; }
		.left { width:320px; padding:10px; }
		.right { flex:1 0 auto; padding:10px; }
		.left img { width:auto; max-width:300px; height:auto; border:solid 1px #ddd; margin-bottom:10px; }
		.text { display:block; width:100%; height:260px; border:solid 2px #ddd; padding:10px; word-break:break-word; word-wrap:break-word ; border-radius:8px; }
    </style>
</head>

<body>    
    <div class="data-wrap">
    	<div class="left">
        	<h4>图片预览：</h4>
        	
        </div>
    	<div class="right" >
    		<h2>选择图片：<input id="uploadfile" type="file" accept="image/*" value=""></h2>
            
            <h2>dataURL <input id="copytext" type="button" class="btn" value="点击复制"></h2>
            <textarea id="text" class="text"></textarea>
            
            <h2>dataURL TO img：<input id="showfile" type="button" value="点击转换"></h2>
        </div>
    </div>
    
    <script src="jquery.min.js" type="text/javascript"></script>
    
    <script>
		// common variables
		
	
    	$('#uploadfile').on('change', function(){
			fileSelected(event);
		})
		$('#showfile').on('click', function(){
			showbase64();
		})
		$('#copytext').on('click', function(){
			copytext();
		})
		
		var t = $('#text')
		
		function fileSelected(event) {
			var oFiles = event.target.files,
				oFile = oFiles[0];
			
			oReader = new FileReader(),
			rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
			
			if (!$('#imgarea').length) {
			var lielem = '<div id="imgarea"><div class="fileimg"><img alt="" ></img></div>'
						+ '<p class="filename"></p><p class="filesize"></p><p class="filetype"></p><p class="filepos"></p></div>';
			$('.left').append(lielem); }
			
			var	oDest = $('#imgarea'),
				oImage = oDest.find('.fileimg img'),
				oName = oDest.find('.filename'),
				oSize = oDest.find('.filesize'),
				oPos = oDest.find('.filepos'),
				oType = oDest.find('.filetype');
				
			if (rFilter.test(oFile.type)) {
				// 是图片
				// 转换为dataurl
				oReader.readAsDataURL(oFile);
				oReader.onload = function(){
					oImage.attr('src',this.result);
					//oImage.append('<img src="' + this.result +'" alt="" />');
					t.val(this.result)
					var oLabel = oDest.find('img');
					//oImage.attr('src', e.target.result);
					oLabel.ready(function(){
						sResultFileSize = bytesToSize(oFile.size);
						oName.html('文件名：' + oFile.name);
						oSize.html('大小：' + sResultFileSize);
						oType.html('类型：' + oFile.type);
						oPos.html('位置：' + $('#uploadfile').val());
					});
				};
			} else {oText.html('请上传图片！');}
		};
		
		function bytesToSize(bytes) {
			var sizes = ['Bytes', 'KB', 'MB'];
			if (bytes == 0) return 'n/a';
			var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
			return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
		};
		
		function showbase64() {
			if($('#imgarea').length) { $('#imgarea').remove(); }
			
			if(!$('#showimg').length) {
				var lielem = '<div id="showimg"><div class="fileimg"><img alt="" ></img></div></div>';
				$('.left').append(lielem);
			}
			var iDest = $('#showimg img');
			iDest.attr('src',t.val());
		}
		
		function copytext()
		{
			t.select(); // 选择对象
			document.execCommand("Copy"); // 执行浏览器复制命令
			alert("已复制好，可贴粘。");
		}
    </script>

</body>
</html>
